<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
		<link href="../bootstrap-3.3.5-dist/css/bootstrap.css" />
		-->
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
  
		<script src="../AngularJS/angular-1.5.0/angular.min.js"></script>
		<script type="text/javascript">
			
angular.module('ngShowcaseApp',[]).controller('ctrl.input.radio', function ($scope) {
  var vm = $scope.vm = {};
  vm.values = [
    {code: 'a', age: 30}, 
    {code: 'b', age: 50},
    {code: 'c', age: 44}
  ];
  vm.selection = vm.values[1];//默认选择设置
});
		</script>
	</head>
	<body ng-app="ngShowcaseApp" ng-controller="ctrl.input.radio">
		<!--
			ng-class="{btn: true, 'btn-primary': true, active: value.code == vm.selection.code}"
		-->
		<h4>按钮组风格</h4>
<div class="btn-group">
  <label ng-repeat="value in vm.values"
         ng-class="{btn: 1==1, 'btn-primary': 1==1, active: value.code == vm.selection.code}">
    <input type="radio" class="hidden" name="myTestRadio" ng-model="vm.selection" ng-value="value"/>编号：{{value.code}}，年龄：{{value.age}}
  </label>
</div>
<h4>单选框风格</h4>
<div class="btn-group">
  <label ng-repeat="value in vm.values">
    <input type="radio" name="myTestRadio" ng-model="vm.selection" ng-value="value"
           ng-checked="vm.selection.code == value.code"/>编号：{{value.code}}，年龄：{{value.age}}&nbsp;&nbsp;
  </label>
</div>

<div>
  您选中的是：{{vm.selection}}
</div>
<h3>说明</h3>
这里使用了一个小技巧：给单选框外面的label加上btn btn-primary风格，并且隐藏掉单选框本身，从而让单选组变成了按钮组的外观，而ng-model等机制不变。
	
	
	</body>
	
</html>
